<template>
  <common-fieldset :title="title" :class="`${textClass}`">
    <div class="row-wrapper">
      <div class="image-box">
        <img :src="url" v-show="url" :style="imgStyle">
      </div>
      <div class="numberWrapper" >
        <count-to :style="textStyle" :class="`number 1 `" :decimals="2" :startVal='total.start' :endVal='total.end'
                  prefix=""
                  :duration='total.duration'></count-to>
        <span class="unit">{{ unit }}</span>
      </div>
    </div>
  </common-fieldset>
</template>

<script>
import commonFieldset from '@/components/common/commonFieldset'
import { CountTo } from 'vue3-count-to'
import { reactive, watch } from 'vue'

export default {
  name: 'processFieldset',
  components: {
    commonFieldset,
    CountTo
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    textClass: {
      type: String,
      default: ''
    },
    textStyle: {
      type: Object
    },
    imgStyle: {
      type: Object
    },
    value: {
      type: Number,
      default: 0
    },
    unit: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    const total = reactive({
      start: 0,
      end: props.value || 0,
      duration: 2000
    })
    watch(() => props.value, () => {
      total.start = total.end
      total.end = props.value
    })
    return { total }
  }
}
</script>
<style lang="scss" scoped>
.row-wrapper {
  display: flex;
  flex-direction: row;

  .image-box {
    text-align: center;
    padding-top: 5px;
    padding-right: 5px;
    flex: 0 0 25%;
    border-right: 1px solid #e3e3e3;
    box-sizing: border-box;

    img {
      height: 70px
    }
  }

  .numberWrapper {
    flex: 1 auto;
    font-size: 13px;
    line-height: 90px;
    margin-left: 5px;
    text-align: center;
    overflow: hidden;
    word-wrap: break-word; /* 允许单词内断行 */
    white-space: normal; /* 处理空白符，自动换行 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 设置最大显示行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

    .number {
      font-size: 26px;
    }
  }

  .numberWrapper2 {
    flex: 1 auto;
    font-size: 13px;
    margin-left: 5px;
    text-align: center;
    word-wrap: break-word; /* 允许单词内断行 */
    white-space: normal; /* 处理空白符，自动换行 */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 设置最大显示行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;

    .cause {
      height: 100%;
      width: 100%;
      line-height: 33px;
      overflow: hidden;
      word-wrap: break-word; /* 允许单词内断行 */
      white-space: normal; /* 处理空白符，自动换行 */
      display: -webkit-box;
      -webkit-line-clamp: 3; /* 设置最大显示行数 */
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;

    }
  }
}
</style>
